<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
</head>

<body>
    <!-- 
    			几个注意点：
    					1.关于组件名:
    								一个单词组成：
    											第一种写法(首字母小写)：school
    											第二种写法(首字母大写)：School
    								多个单词组成：
    											第一种写法(kebab-case命名)：my-school,但是要加''，用的时候不用加
    											第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
    								备注：
    										(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。
    										(2).可以使用name配置项指定组件在开发者工具中呈现的名字。
    
    					2.关于组件标签:
    								第一种写法：<school></school>
    								第二种写法：<school/>
    								备注：不用使用脚手架时，<school/>会导致后续(后面的)组件不能渲染。
    
    					3.一个简写方式：
    								const school = Vue.extend(options) 可简写为：const school = options
    		-->
    <div id="root">
        {{msg}}
        <school></school>
    </div>

</body>
<script>
    Vue.config.productionTip = false;

    const schoolCom = Vue.extend({
        name: "mimi",//注册的时候取的组件名，标签就用什么名，但是vue开发者工具中的名字是看这里取的什么名，没写name，就用组件名
        template: `
        <div>
            <h2>学校名称:{{schoolName}}</h2>
            <h2>学校地址:{{address}}</h2>
        </div>
        `,
        data: function () {
            return {
                schoolName: '尚硅谷',
                address: '北京'
            }
        }
    });

    const vm = new Vue({
        el: '#root',
        data: {
            msg: 'hello'
        },
        components: {
            school: schoolCom,//const school = Vue.extend(options) 可简写为：const school = options 在注册组件这一步底层会判断需不需要补一个Vue.extend()
        }
    });
</script>

</html>